<template>
  <div class="shrink-box">
    <div class="box-full bgfff round-4 no-drag box-border px-60 py-50 flex-col">
      <a-tabs class="mb-20" hide-content :active-key="selectedKey" @change="onTabChange">
        <a-tab-pane :key="1">
          <template #title>
            <div class="flex flex-a-c font-bold">
              <div class="flex flex-center bgFFE0EB p-2 round-4 mr-4">
                <icon-link class="mr-2 rotate180" />
              </div>
              <span>智能转链</span>
            </div>
          </template>
        </a-tab-pane>
        <a-tab-pane :key="2">
          <template #title>
            <div class="flex flex-a-c font-bold">
              <div class="flex flex-center bgFFE0EB p-2 round-4 mr-4">
                <icon-link class="mr-2 rotate180" />
              </div>
              <span>转短链</span>
            </div>
          </template>
        </a-tab-pane>
      </a-tabs>
      <div class="flex flex-1">
        <div class="flex-2 mr-20 flex flex-j-c flex-a-c">
          <a-card
            class="box-full flex-col"
            :body-style="{ height: '100%', overflow: 'hidden', position: 'relative' }"
          >
            <template #title>
              <div class="flex flex-a-c">
                <template v-if="status == 3">
                  <a-spin dot size="3" />
                  <span class="text-size-14 font-weight-700 ml-10">转链中...</span>
                </template>
                <template v-else-if="status == 1">
                  <div class="bg-theme textfff round-50-p w-6n h-6n flex-center">
                    <icon-link class="text-size-14" />
                  </div>
                  <span class="text-size-14 font-weight-700 ml-6">转链成功！</span>
                </template>
                <template v-else-if="status == 2">
                  <div class="bgred textfff round-50-p w-6n h-6n flex-center">
                    <icon-link class="text-size-14" />
                  </div>
                  <span class="text-size-14 font-weight-700 ml-6 textred">转链失败！</span>
                </template>
                <template v-else>
                  <div class="bg999 textfff round-50-p w-6n h-6n flex-center">
                    <icon-link class="text-size-14" />
                  </div>
                  <span class="text-size-14 font-weight-700 ml-6 text999">等待转链</span>
                </template>
              </div>
            </template>
            <template #extra>
              <div class="flex flex-a-c">
                <span class="mr-4 font-weight-700 text333">自动转链</span>
                <a-switch size="small" v-model="autoTurn" />
              </div>
            </template>
            <div class="box-full flex-col">
              <div class="w-full flex-1 flex-col box-border flex-j-c pl-14 border-b-1 mb-14 pb-14">
                <div class="mb-14">转链方式：</div>
                <div class="mb-14 flex flex-a-c">
                  <span>京东：</span>
                  <a-radio-group>
                    <template v-for="item in type" :key="item.id">
                      <a-radio :value="item.id">
                        <template #radio="{ checked }">
                          <a-space
                            align="start"
                            class="custom-radio-card"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div class="custom-radio-card-title">{{ item.name }}</div>
                          </a-space>
                        </template>
                      </a-radio>
                    </template>
                  </a-radio-group>
                </div>
                <div class="flex flex-a-c box-border pl-42">
                  <a-checkbox class="mr-20" value="radio">京东极速版</a-checkbox>
                  <a-checkbox value="radio">小程序链接</a-checkbox>
                </div>
              </div>
              <div class="w-full flex-3 flex-col">
                <div class="flex-1 overflow-hidden m-relative">
                  <!-- <div class="m-absolute t-0 b-0 l-0 r-0 overflow-hidden"> -->
                  <a-scrollbar style="width: 100%; height: 100%; overflow-y: auto">
                    <a-textarea
                      v-model="text"
                      auto-size
                      style="min-height: 98%"
                      placeholder="请输入链接"
                      @blur="handleBlur"
                    />
                  </a-scrollbar>
                  <!-- </div> -->
                </div>
                <div style="height: fit-content">
                  <div class="flex flex-j-e mt-10">
                    <a-button type="outline" @click="text = undefined">一键清空</a-button>
                  </div>
                  <a-alert
                    class="mt-10"
                    v-if="turnInfo"
                    :class="status == 1 || status == 2 ? 'opacity-10' : 'opacity-0'"
                    :type="status == 1 ? 'success' : 'error'"
                    >转链成功{{ turnInfo.successCount || 0 }}条，失败{{
                      turnInfo.failCount || 0
                    }}条</a-alert
                  >
                </div>
              </div>
            </div>
          </a-card>
        </div>
        <div class="flex-1">
          <a-card class="box-full flex-col">
            <template #title>
              <div class="flex flex-a-c">
                <div class="round-50-p flex-center bgred textfff w-6n h-6n">
                  <span class="text-size-14 iconfont icon--shangpinguanli" />
                </div>
                <span class="text-size-14 font-weight-700 ml-6">转链商品</span>
              </div>
            </template>
            <div class="box-full m-absolute t-0 b-0 l-0 r-0 p-20">
              <a-scrollbar style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
                <div v-if="turnInfo?.goodsLists?.length">
                  <div
                    class="bgfff w-full box-border border-b-1 mb-14 p-10 flex ovflow-hidden"
                    v-for="(item, index) in turnInfo.goodsLists"
                    :key="index"
                  >
                    <a-image width="74px" height="74px" class="mr-14" :src="item.picUrl"></a-image>
                    <div class="flex-col flex-1 ovflow-hidden m-relative" style="min-width: 0">
                      <div style="min-height: 22px" class="my-2 w-full line-h-24 text-overflow-1">
                        <span class="m-absolute t-0 l-0" v-if="platforms[item.sourceType]">
                          <a-tag color="red">{{ platforms[item.sourceType] }}</a-tag>
                        </span>
                        <span
                          :style="{
                            paddingLeft: `${
                              platforms[item.sourceType]
                                ? platforms[item.sourceType].length * 14 + 18
                                : 0
                            }px`
                          }"
                        >
                          <a-tooltip :content="item.title">
                            <span>{{ item.title }}</span>
                          </a-tooltip>
                        </span>
                      </div>
                      <div
                        class="flex flex-a-c round-4 ovflow-hidden borderFD1855 w-fit my-4"
                        :class="
                          item.commission && item.commission != 0 ? 'opacity-10' : 'opacity-1'
                        "
                      >
                        <div class="bgFD1855 flex-center textfff text-size-12 px-4 h-full">返</div>
                        <div class="textFD1855 px-10 w-fit">{{ item.commission }}</div>
                      </div>
                      <div class="flex flex-a-c my-2">
                        <span class="textd43030 text-size-14 font-bold">
                          <span class="text-through text999 text-size-12" v-if="item.originalPrice">
                            ￥{{ item.originalPrice }}
                          </span>
                          <span v-if="item.actualPrice">￥{{ item.actualPrice }}</span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <a-empty v-else> 暂无数据 </a-empty>
              </a-scrollbar>
            </div>
          </a-card>
        </div>
      </div>
      <div class="flex mt-20">
        <div class="flex-2 mr-20 flex flex-j-c flex-a-c">
          <a-button type="outline" class="mr-30" @click="doTurn" :loading="status === 3"
            >重新转链</a-button
          >
          <a-button type="primary" @click="copyText(text)">一键复制</a-button>
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { IconLink } from '@arco-design/web-vue/es/icon'
import { Message } from '@arco-design/web-vue'
import { copyText } from '@renderer/common/js/utils'
const { ipcRenderer } = window.electron
const selectedKey = ref(1)
const status = ref(0) //0未开始 1转链成功 2转链失败 3转链中
const type = [
  { name: '日常商品', id: 1 },
  { name: '百亿补贴', id: 2 }
]
const platforms = [
  '',
  '淘宝',
  '京东',
  '拼多多',
  '苏宁',
  '唯品会',
  '考拉',
  '抖音',
  '快手',
  '猫享',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '美团联盟',
  '饿了么',
  '',
  '',
  '腾讯云选',
  '',
  '',
  '',
  '美团美天赚',
  '',
  '',
  '',
  '短剧推广'
]
const autoTurn = ref(true)
const text = ref()
const turnInfo = ref()

const onTabChange = async (e) => {
  selectedKey.value = e
}

// 监听WebSocket消息
ipcRenderer.on('webSocketMessage', async (event, res) => {
  if (res?.data?.wsMsgType) {
    switch (res?.data?.wsMsgType) {
      case 'turn':
      case 'makeShortUrl':
        if (res.code == 200) {
          text.value = res.data.list.shortUrlContent || res.data.list.content
          turnInfo.value = res.data.list
          status.value = 1
        } else {
          Message.error(res.message)
          status.value = 2
        }
        break
    }
  }
})

const doTurn = async () => {
  if (!text.value) return
  status.value = 3
  const userInfo = await window.ipcRenderer.invoke('storeGet', 'userInfo')
  ipcRenderer.send('sendToWebSocket', {
    openId: userInfo.openId,
    content: text.value,
    wsMsgType: selectedKey.value == 1 ? 'turn' : 'makeShortUrl'
  })
}

const handleBlur = () => {
  if (autoTurn.value) doTurn()
}
</script>
<style scoped lang="scss">
.shrink-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #eee;
  box-sizing: border-box;
  padding: 10px;
  background: #ececec;
  .arco-tabs-nav::before {
    display: none;
  }

  .arco-textarea-wrapper:focus-within,
  .arco-textarea-wrapper.arco-textarea-focus {
    border: none;
  }
}

.arco-scrollbar {
  height: 100%;
}
.bgFFE0EB {
  background: #ffe0eb;
}
.rotate180 {
  transform: scaleX(-1);
}
.custom-radio-card {
  padding: 4px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  box-sizing: border-box;
}
.custom-radio-card-title {
  color: var(--color-text-1);
  font-size: 12px;
}
.custom-radio-card:hover,
.custom-radio-card-checked {
  border-color: rgb(var(--primary-6));
}
.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}
.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.textred {
  color: red;
}

.bgred {
  background: red;
}
.border-b-1 {
  border: 1px solid #ececec;
}
.textd43030 {
  color: #d43030;
}
.bgFD1855 {
  background: #fd1855;
}
.textFD1855 {
  color: #fd1855;
}
.borderFD1855 {
  border: 1px solid #fd1855;
}
</style>
